<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
	/*
		arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)
			-x, y : 起始位置
			-弧度与角度的关系 : 弧度 = 角度*Math.PI/180
			-旋转方向 : 顺时针 false(默认)、逆时针 true

			注意：  1) 90度是最底部的点，-90度是最顶部的点
							-90

					+/-180			0

							90
	*/
		
		setInterval(toDraw,1000);
		toDraw();

		function toDraw() {
			var x = 200;
			var y = 200;
			var r = 150;
			
			var oDate = new Date();
			var oHou = oDate.getHours();
			var oMin = oDate.getMinutes();
			var oSec = oDate.getSeconds();
			//alert(typeof oHou) -> number

			//建立变量对应
			var oHouValue = (-90 + (oHou + oMin/60)*30)*Math.PI/180;
			var oMinValue = (-90 + (oMin + oSec/60)*6)*Math.PI/180;
			var oSecValue = (-90 + oSec*6)*Math.PI/180;


			//因为定时器会每一次都运行一次，所以每一次生成之前清楚掉上一次的
			oGC.clearRect(0, 0, oC.width, oC.height);

			//制作分钟刻度线(最好把他们用beginPath/closePath包起来，以免有什么影响.就是最后一条线会被画两次)
			oGC.beginPath();
			for (var i = 0; i < 60; i++) {
				oGC.moveTo(x, y);
				oGC.arc(x, y, r, 6*i*Math.PI/180, 6*(i+1)*Math.PI/180, false);
			};
			oGC.closePath();
			oGC.stroke();

			//填充一块小圆，遮盖刻度线的延长线部分
			oGC.beginPath();
			oGC.fillStyle = '#fff';
			oGC.arc(x, y, r*19/20, 0, 360*Math.PI/180, false);
			oGC.closePath();
			oGC.fill();

			//5分钟一大格绘制
			oGC.beginPath();
			oGC.lineWidth = 3;
			for (var i = 0; i < 12; i++) {
				oGC.moveTo(x, y);
				oGC.arc(x, y, r, 30*i*Math.PI/180, 30*(i+1)*Math.PI/180, false);
			};
			oGC.closePath();
			oGC.stroke();

			//填充一块小圆，遮盖刻度线的延长线部分
			oGC.beginPath();
			oGC.fillStyle = '#fff';
			oGC.arc(x, y, r*17/20, 0, 360*Math.PI/180, false);
			oGC.closePath();
			oGC.fill();

			//时针(不要用直线，会定死了数值)
			oGC.beginPath();
			oGC.lineWidth = 5;
			oGC.moveTo(x, y);
			oGC.arc(x, y, r*10/20, oHouValue, oHouValue, false);
			oGC.closePath();
			oGC.stroke();

			//分针
			oGC.beginPath();
			oGC.lineWidth = 3;
			oGC.moveTo(x, y);
			oGC.arc(x, y, r*15/20, oMinValue, oMinValue, false);
			oGC.closePath();
			oGC.stroke();

			//秒针
			oGC.beginPath();
			oGC.lineWidth = 1;
			oGC.moveTo(x, y);
			oGC.arc(x, y, r*18/20, oSecValue, oSecValue, false);
			oGC.closePath();
			oGC.stroke();
		}
	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>